<template>
	<view>

		<view class="tabs">
			<view class="tab" v-for="(item,index) in navList" :key="item.id" :class="navCurrent==item.id?'active':''"
				@click="navChange(item.id)">
				{{item.tab}}
			</view>
		</view>
		<scroll-view :scroll-y="true" class="scroll">
			<view class="node-group">
				<!-- key要换 -->
				<view v-if="nodeList.length>0" class="node-list card" v-for="(item,index) in nodeList" :key="index">
					<view class="top">
						<view class="node-left">
							<view class="node-name">{{item.name || '匿名商品'}}</view>
							<view class="node-numBox" v-if="navCurrent==0">
								<view class="node-num">数量: {{item.number || 0}}</view>
								<view class="node-num">剩余: {{item.skus || 0}}</view>
								<view class="node-num">单价:  {{item.price || 0}}</view>
							</view>
							<view class="node-numBox" v-if="navCurrent==1 || navCurrent==2 || navCurrent==3">
								<view class="node-num">数量: {{item.number || 0}}</view>
								<view class="node-num">单价: {{item.price || 0}}</view>
							</view>
						</view>
						<view class="node-right">
							<view class="node-date">{{item.createTime || '2025-12-12'}}</view>
							<view class="node-num2">
								<text class="a01">总价: </text>
								<text class="a02">{{(navCurrent==3?item.incomePrice : item.totalPrice )|| 0}}</text>
							</view>
						</view>
					</view>
					<view class="market-driver"></view>
					<view class="node-btn-group" v-if="navCurrent==0">
						<view class="node-btn" @click="xj(item)">撤销</view>
					</view>
				</view>
				<view v-if="nodeList.length==0" class="none">
					暂无信息
				</view>
			</view>
		</scroll-view>

		<star-sure :show.sync="sureShow" :title="title" :text="text" @confirm="onConfirm"></star-sure>

	</view>
</template>

<script>
	import {infoList,productRevoke } from '@/api/market.js'
	export default {
		data() {
			return {
				sureShow: false,
				title: '确认下架',
				text: '确定要下架该商品吗？此操作不可撤销。',
				navCurrent: 0,
				navList: [{
					tab: '上架中',
					id: 0
				}, {
					tab: '已完成',
					id: 1
				}, {
					tab: '求购明细',
					id: 2
				},
				{
					tab: '售出明细',
					id: 3
				}
				],
				nodeList: [],
				productId:null
			};
		},
		methods: {
			async getList(id){
				// 0=上架中，1=已完成,2=求购明细 ，3=售出明细
				let data={
					queryType:id || 0
				}
				let res = await infoList(data)
				this.nodeList = res.data.records
			},
			navChange(id) {
				this.getList(id)
				this.navCurrent = id
			},
			async xj(item) {
				this.productId = item.productId
				this.sureShow = true
			},
			// 点击确认弹窗
			async onConfirm() {
				console.log('123123123');
				let data={
					productId:this.productId
				}
				await productRevoke(data)
				uni.showToast({
					title:'撤销成功',
					icon:'none'
				})
				this.getList()
			},
			
		}
	}
</script>

<style lang="scss">
	.none{
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		opacity: 0.8;
	}
	.tabs {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.tab {
		border-radius: 9999px;
		white-space: nowrap;
		background-color: #374151;
		color: #d1d5db;
		padding: 10rpx 24rpx;
		font-weight: 500;
		--tw-text-opacity: 1;
	}

	.active {
		color: #fff;
		background-color: #3b82f6;
	}

	.scroll {
		height: calc(100vh - 450rpx);
		overflow: hidden;
		margin-top: 30rpx;
	}

	.node-group {
		padding-bottom: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
	}

	.node-list {
		width: 100%;
		padding: 25rpx;

		.top {
			display: flex;
			align-items: start;
			justify-content: space-between;
		}
	}

	.node-left {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.node-right {
		display: flex;
		flex-direction: column;
		align-items: end;
		gap: 10rpx;
	}

	.node-name {
		font-size: 32rpx;
		font-weight: 700;
		color: #fff;
		line-height: 1;
	}

	.node-numBox {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.node-num {
		font-size: 28rpx;
		font-weight: 500;
		color: #e2e8f0;
		line-height: 1;
	}

	.node-num2 {
		font-weight: 600;
		color: #e2e8f0;
		line-height: 1;

		.a01 {
			font-size: 28rpx;
		}

		.a02 {
			font-size: 30rpx;
		}
	}

	.node-date {
		font-size: 28rpx;
		font-weight: 500;
		color: #fff;
		line-height: 1;
		white-space: nowrap;
	}

	.node-type {
		font-size: 28rpx;
		font-weight: 400;
		color: #fff;
		line-height: 1;
	}

	.node-btn-group {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.node-btn {
		background: #3b82f6;
		margin-top: 20rpx;
		padding: 10rpx 45rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
	}

	.market-driver {
		margin-top: 20rpx;
		width: 100%;
		height: 2rpx;
		background-color: rgba(255, 255, 255, 0.1);
	}
</style>